<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的重点难点整理</title>
<style>
body, html {
  margin: 0;
  padding: 0;
  font-family: 'Arial', sans-serif;
  background-color: #e7f2fb;
}

.header {
  background-color: #007bff;
  color: white;
  padding: 15px;
  text-align: center;
}

.material-display {
  background-color: white;
  padding: 20px;
  margin: 15px;
  border-radius: 5px;
  height: 60vh; /* Adjust height as needed */
  overflow-y: auto; /* Scroll for longer content */
}

.key-points {
  background-color: white;
  padding: 20px;
  margin: 15px;
  border-radius: 5px;
  height: 30vh; /* Adjust height as needed */
  overflow-y: auto; /* Scroll for longer content */
}

.key-point-item {
  padding: 10px;
  border-bottom: 1px solid #e7e7e7;
}

.key-point-item:last-child {
  border-bottom: none;
}

.add-button {
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.search-box {
  width: 100%;
  padding: 10px;
  margin-top: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
</style>
</head>
<body>

<div class="header">我的重点难点整理</div>

<div class="material-display">
  <!-- 学习材料内容展示，示例文本请替换成实际内容 -->
  <p>这里是学习材料的内容展示区域。用户可以在这里阅读材料并进行重点难点的标记。</p>
  <!-- 标记的实际操作需要JavaScript来实现 -->
</div>

<div class="key-points">
  <!-- 添加重点难点按钮 -->
  <button class="add-button">添加重点难点</button>
  
  <!-- 搜索框 -->
  <input type="text" class="search-box" placeholder="搜索重点难点">
  
  <!-- 用户标记的重点难点列表 -->
  <div class="key-point-item">定义：重点内容1</div>
  <div class="key-point-item">公式：难点内容2</div>
  <!-- 更多标记内容 -->
</div>

</body>
</html>
